<template>
  <div id="app">
    <a-layout id="layout-top" class="layout">
      <a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
        <div class="logo">
          <img
            src="https://www.waimaowuyou.com/images/logo.png"
            width="100%"
            alt=""
          />
        </div>
        <a-menu
          theme="light"
          mode="horizontal"
          :selectedKeys="selectedKeys"
          :style="{ lineHeight: '64px', float: 'left' }"
        >
          <a-menu-item key="/">
            <router-link to="/">首页</router-link>
          </a-menu-item>
          <a-menu-item v-if="user.email" key="/dashboard">
            <router-link to="/dashboard">工作台</router-link>
          </a-menu-item>
        </a-menu>
        <a-menu
          mode="horizontal"
          theme="light"
          :selectedKeys="selectedKeys"
          :style="{ lineHeight: '64px', float: 'right' }"
        >
          <a-menu-item v-if="user.is_admin == 1" key="/admin">
            <router-link to="/admin">管理后台</router-link>
          </a-menu-item>
          <a-menu-item v-if="user.email" key="/logout">
            <a href="javascript:;" @click="logout">退出</a>
          </a-menu-item>

          <a-menu-item v-if="!user.email" key="/register">
            <router-link to="/register">注册</router-link>
          </a-menu-item>
          <a-menu-item v-if="!user.email" key="/login">
            <router-link to="/login">登录</router-link>
          </a-menu-item>
        </a-menu>
      </a-layout-header>
      <a-layout-content :style="{ padding: '0 50px', marginTop: '64px' }">
        <router-view></router-view>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        ©2020 Created by Waimaowuyou
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<script>
export default {
  data() {
    return {
      collapsed: false,
      selectedKeys: []
    };
  },
  watch: {
    $route(to) {
      this.selectedKeys = [to.path];
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }
  },
  created() {
    this.selectedKeys = [this.$route.path];
    this.$axios.get(
      process.env.VUE_APP_BACKGROUND_API + "/sanctum/csrf-cookie"
    );
    this.$axios
      .get(process.env.VUE_APP_BACKGROUND_API + "/api/user")
      .then(response => {
        this.$store.commit("setUser", response.data);
        if (this.$route.path.indexOf("/login") != -1) {
          this.$router.push("/dashboard");
        }
      })
      .catch(error => {
        if (this.$route.path.indexOf("/dashboard") != -1) {
          if (error.response.status === 401 && this.$route.path !== "/login") {
            this.$router.push("/login");
          }
        }
      });
  },
  methods: {
    logout() {
      this.$axios
        .get(process.env.VUE_APP_BACKGROUND_API + "/api/logout")
        .then(() => {
          this.$store.commit("setUser", "");
          this.$router.push("/login");
        })
        .catch(() => {
          this.$router.push("/");
          this.$message.error("退出失败");
        });
    }
  },
  computed: {
    user() {
      return this.$store.getters.user;
    }
  }
};
</script>

<style>
#layout-top .logo {
  width: 130px;
  float: left;
}
#layout-top .logo img {
  width: 120px;
}
#layout-top .ant-layout-header {
  background: #fff;
}
</style>
